<template>
  <div class="card" :style="`width:${realWidth};height:${realHeight};border-radius:${realBorderRadius}`">
    <slot/>
  </div>
</template>

<script>

export default {
  name: "card",
  props: {
    width: {
      type: [Number, String],
      default: ""
    },
    height: {
      type: [Number, String],
      default: ""
    },
    borderRadius:{
      type: [Number, String],
      default: ""
    }
  },
  data() {
    return {};
  },
  computed: {
    realWidth() {
      return typeof this.width == "string" ? this.width : `${this.width}px`;
    },
    realHeight() {
      return typeof this.height == "string" ? this.height : `${this.height}px`;
    },
    realBorderRadius() {
      return typeof this.borderRadius == "string" ? this.borderRadius : `${this.borderRadius}px`;
    }
  },
}
</script>

<style scoped>
.card {
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
}
</style>
